<template>
	<view class="auth">
		<up-form :model="form" :rules="rules" label-width="90px" ref="formRef">
			<view class="form_part">
				<up-form-item label="企业关联码" prop="relateEntCode" border-bottom>
					<up-input placeholder="请输入企业关联码" border="none" v-model="form.relateEntCode"></up-input>
				</up-form-item>
				<up-form-item label="当前手机号" prop="phone" border-bottom>
					<up-input type="number" placeholder="请输入当前手机号" border="none" v-model="form.phone"></up-input>
				</up-form-item>
			</view>
			<view class="form_part">
				<ssection title="请上传本人有效身份证(必填)" line></ssection>
				<view class="file_box">
					<view style="margin-right: 20px;">
						<view class="image_part">
							<image :src="image.certificateFrontPic" @click="uploadImage(0, 1, 'certificateFrontPic')">
							</image>
						</view>
						<view class="file_title">身份证正面</view>
					</view>
					<view>
						<view class="image_part">
							<image :src="image.certificateBackPic" @click="uploadImage(0, 0, 'certificateBackPic')">
							</image>
						</view>
						<view class="file_title">身份证反面</view>
					</view>
				</view>
			</view>
			<view class="form_part">
				<ssection title="请确定委托人收款人信息" line></ssection>
				<up-form-item label="姓名" border-bottom prop="name">
					<up-input border="none" v-model="form.name" placeholder="请上传身份证,系统自动识别"></up-input>
				</up-form-item>
				<up-form-item label="身份证号" border-bottom prop="idCard">
					<up-input border="none" v-model="form.idCard" placeholder="请上传身份证,系统自动识别"></up-input>
				</up-form-item>
				<view class="form_button">
					<up-button type="primary" @click="auth">认证</up-button>
				</view>
			</view>

		</up-form>
	</view>
	<up-toast ref="uToastRef"></up-toast>
</template>

<script setup>
import { ref, reactive } from 'vue'
import certificateFrontPic from '../../../static/images/mine/Portraitface.png'
import certificateBackPic from '../../../static/images/mine/National.png'
import ssection from "@/components/ssection.vue"
import {
	chooseImage, uploadFiles
} from '@/api/file.js'
import { authentication } from '@/api/driver.js'

/* 数据 */
// 提示
const uToastRef = ref(null)
const formRef = ref(null)
// 表单
const form = reactive({
	name: '',
	phone: '',
	idCard: '',
	relateEntCode: '',
	certificateFrontPic: '',
	certificateBackPic: ''
})
// 校验规则
const rules = reactive({
	relateEntCode: {
		type: 'string',
		required: true,
		message: '请填写企业关联码',
		trigger: ['blur', 'change']
	},
	phone: [{
		type: 'string',
		required: true,
		message: '请填写手机号',
		trigger: ['blur', 'change'],

	},
	{
		pattern: /(^1[3-9][0-9]{9}$)/g,
		message: '手机格式错误',
		trigger: ['blur', 'change']
	}],
	name: {
		type: 'string',
		required: true,
		message: '请填写姓名',
		trigger: ['blur', 'change']
	},
	idCard: [{
		type: 'string',
		required: true,
		message: '请填写身份证号',
		trigger: ['blur', 'change']
	},
	{
		pattern: /(^\d{15}$)|(^\d{17}[\dxX]$)/g,
		message: '请输入正确的身份证号',
		trigger: ['blur', 'change']
	}]
})
// 图片
const image = reactive({
	certificateFrontPic,
	certificateBackPic
})



/* 方法 */
// 上传图片
const uploadImage = async (licenseType, cardType, type) => {
	let img = await chooseImage()
	uToastRef.value.show({
		message: '正在上传...',
		type: 'loading',
		duration: -1
	})
	let res = await uploadFiles(img, {
		licenseType,
		cardType
	})
	uToastRef.value.hide()
	if (res.success) {
		image[type] = img
		form[type] = res.data.fileId
		let data = res.data.certificateInfo
		if (type === 'certificateFrontPic') {
			form.name = data.name
			form.idCard = data.iDNumber
		}
	}
}
// 认证
const auth = async () => {
	if (!form.certificateFrontPic || !form.certificateBackPic) {
		uToastRef.value.show({
			position: 'top',
			message: '请上传正，反面身份证',
			type: 'warning'
		})
		return
	}
	let valid = await formRef.value.validate()
	if (valid) {
		uToastRef.value.show({
			message: '正在认证...',
			type: 'loading',
			duration: -1
		})
		let res = await authentication(form)
		uToastRef.value.hide()
		if (res.success) {
			uToastRef.value.show({
				position: 'top',
				message: '实名认证成功，两秒后跳转视频认证',
				type: 'success',
				complete() {
					uni.navigateTo({
						url: `/package_mine/pages/entrustedPayee/videoAuth?name=${form.name}&idCard=${form.idCard}`
					})
				}
			})
		}
	}
}





</script>


<style lang="scss" scoped>
::v-deep .uni-section {
	.uni-section-header {
		padding: 12px 0px !important;
		font-weight: 700;
		font-size: 40px;
	}
}

.auth {
	.form_part {
		background-color: #fff;
		padding: 10px;
		box-sizing: border-box;
		margin-bottom: 10px;

		.form_button {
			margin-top: 15px;
		}

		.file_box {
			display: flex;
			padding: 0 10px;

			>view {
				flex: 1;
				margin-right: 10px;

				&:last-child {
					margin-right: 0;
				}

				.image_part {
					width: 100%;
					aspect-ratio: 3 / 2;
					border: 1px solid #ddd;
					padding: 10px;
					box-sizing: border-box;

					>image {
						width: inherit;
						height: 100%;
					}
				}

				.file_title {
					padding: 15px 0 5px;
					font-size: 14px;
					text-align: center;
				}
			}
		}

		.low_tip {
			color: rgb(64, 117, 247);
		}
	}
}
</style>
